import React, {Component} from "react"

import {UserOutlined, LockOutlined } from '@ant-design/icons'
import { Button, Form, Input, Radio, message } from 'antd'
import './index.less'

import { AdminLogin } from '../../api/admin'

class Login extends Component {
  myRef = React.createRef();
   state = {
     srole: '',
     username: '',
     password: ''
   }

 submit = () => {
   this.myRef.current.submit()

 }
 // 表单重置
 resetForm = () => {
   this.myRef.current.resetFields()
 }
  // 表单验证成功，进行登录
  login =  async () => {
    const res = await AdminLogin(this.state)
    if (res.code === 200) {
      const token = res.data.token
      window.sessionStorage.setItem('token', token)
      window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
      message.success('登录成功')
      this.props.history.push('/home')
    }  else {
      message.error('登录失败')
    }
    
  }
 // 表单验证失败
  FormError = () => {
   message.error('表单数据有误')
  }
  // 单选框选择
  onRadioChange = (e) => {
    const srole = e.target.value
    this.setState({srole})
  }
  // 监听密码框输入值的变化
  changeUserName = (e) => {
     const username = e.target.value
     this.setState({username})
  }
  // 监听密码框的值变化
  changePassword = (e) => {
    const password = e.target.value
    this.setState({password})
 }

  render() {
    const { srole, username, password } = this.state
    return (
        <div className="login_container">
              <div className="login">
                <div className="loginItem">
                <div className="icon">
                  <img src="" alt=""/>
                </div>
              <Form
              ref={this.myRef}
              name="normal_login"
              className="login-form"
              initialValues={{
                remember: true,
              }}
              onFinish={this.login}
              onFinishFailed={this.FormError}
            >
      <Form.Item
        name="userName"
        label="账号"
        rules={[
          {
            required: true,
            message: '用户名不能为空',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" value={username} />} placeholder="请输入用户名" onChange={this.changeUserName} />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: '密码不能为空',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入登录密码"
          value={password}
          onChange={this.changePassword}
        />
      </Form.Item>
      <Form.Item 
      label="角色"
      name="srole"
      rules={[
        {
          required: true,
          message: '角色不能为空',
        },
      ]}>
      <Radio.Group onChange={this.onRadioChange} value={srole}>
      <Radio value='超级管理员'>超级管理员</Radio>
      <Radio value='管理员'>管理员</Radio>
      </Radio.Group>
      </Form.Item>
    </Form>
    <div className="btnItem"> <Button type="primary" onClick={this.submit} >登录</Button>
     <Button className="resetbtn" onClick={this.resetForm}>重置</Button></div>
    <div className="tip">© 2020 赣南医学院医学信息工程学院 版权所有</div>
      </div>
        </div>
        </div>
    )
  }
}

export default Login